Añadir iconos en los títulos de las entradas es una de esas preguntas que se repite con frecuencia, hace tiempo veíamos como añadir una imagen de fondo o color hoy añadiremos un pequeño icono o bullet.
Los estilos de los títulos en los post en una plantilla Minima vienen definidos de la siguiente forma.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$titlecolor;
}


Añadimos el icono.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background: url(url del icono) no-repeat 0 .5em;
padding-left: 20px;
}



Con padding-left ajustamos la distancia entre el icono y el título.
Para ajustarlo de altura podemos aumentar o disminuir el valor 0 .5em

Y ya puestos si queremos es el momento de cambiar de estilo, tamaño y color de fuente.

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font-family: "Century Gothic",Trebuchet MS,sans-serif;
font-size: 24px;
color:#000;
font-weight:normal;
}

Para añadir unos estilos que resulten diferentes al pasar el ratón un ejemplo sería:

.post h3 strong, .post h3 a:hover {
color: #1B703A;
font-size: 24px;
}


En WEBSITEBULLETS encontraréis bullets para decorar los títulos de los post.


Henry Herrera

No sabia que se podia hacer eso. Mas bien ni se me habia ocurrido tal cosa, pero puede servir mas adelante, ya hacian falta tus post.

Buen inicio de labores o vacaciones, lo que mas te guste hacer.

Responder
Gem@

yz Gracias por tus siempre amables comentarios Henry :)

Responder
Diego

Que chulo! Aún estoy pensando si implementarlo en mi blog o no hmmmm

Responder
Unknown

sigue descansado bajo la palmera :)...por aquí conmemoramos-festejamos el día del amigo, no creo en los días...pero igualmente QUE LA PASES GENIAL ♥ ♥

Responder
Gem@

yz Todo tuyo Diego :)

yz Hola Graciela yo tampoco creo en esos días ni en muchos otros pero cualquier momento es bueno para desearte lo mejor y mandarte un gran abrazo :)

Responder
Anónimo

Gem@ on taz :(( I need you.

Responder
Mauri
Este comentario ha sido eliminado por el autor.
Responder
Mauri

Gem@ .. gracias por tus entradas (no se nada de compus y pude cambiar el fondo de mi blog y poner iconos a los titulos ... :). Lo que me complica ahora es que los elementos de la pagina se ven muy comprimidos al centro y tanto espacio desocupado a los costados se ve antiestetico. ¿¿Como puedo extender el encabezado de un costado a otro; o poner imagenes en los margenes del blog?? .. besos <3

Responder
Gem@

yz juan_santiago sería muy largo de explicar en un comentario la modificación que debes hacer pero casualmente J.Miur ha creado una entrada que coincide con lo que preguntas puedes verla en la siguiente url
http://vagabundia.blogspot.com/2009/07/modificando-las-plantillas-tutorial-7.html
:)

yz Anónimo te vendría muy bien salir y conocer gente, participar en actividades incluso crearte un blog y compartir gustos y aficiones con otros bloggers, no lo digo con ánimo de ofenderte pero medítalo :)

Responder
Mauri

gracias gracias .. ya lo arreglé un poco .. luego sigo con eso .. pero no sin antes pedirte ayuda en algo que me tiene preocupado .. cuando sigo algún sitio, en vez de mi foto, se ve el cuadro con una x roja .. y me dijeron que cuando intentaban entrar a mi sitio, daba error .. inténté eliminando la foto y volviendola a cargar .. pero nada! más besos, graaacias :)

Responder
Gem@

yz juan_santiago he accedido a tu blog sin problemas y la imagen de perfil que es lo que se añade en el gadget de seguidores la veo perfectamente, sería interesante saber si las personas que tienen esos problemas para acceder tienen su navegador actualizado así como la clase de error que tienen.

Responder
[ Michel ]

hola, muy buen post pero nose si es lo que estaba buscando, quiero saber como puedo poner una imagen o calendario al publicar cada post.... osea que al principio de cada titulo de mis post aparesca la imagen de un calendario mostrando la fecha y el mes...nose si me dejo entender.

ojala puedas ayudarme gracias

Responder
Gem@

yz Hola Michel mira si fuera esto lo que deseas hacer: http://gemablog-.blogspot.com/2007/03/personalizar-la-fecha-del-blog.html ;)

Responder
Smark

de bastante utilidad muchas gracias

Responder
Gem@

yz Gracias a ti por comentar Smark :)

Responder
EM2.0

Hola Gema, disculpa que vuelva otra vez con un sos, pero llevo toda la tarde intentando y no encuentro solución. He estado intentando personalizar los títulos, porque quedan francamente raquíticos, he probado de todo ha poner un fondo como explicas en otra entrada, he probado lo del icono a cambiar fuentes, lo he intentado también desde las mismas entradas dándole el código para hacerla simplemente negrita, y nada no me funciona nada, y no se a que se debe es como si algo bloqueara cualquier cambio o como si alguna variable faltara en la plantilla pero no se cual, me temo que doy palos de ciego y lo mismo es una bobada pero no doy con ella, agradecería una idea si puedes darmela.

Responder
Gem@

yz Igual llego tarde ¿verdad Dña. Urraca? he visto que a personalizado los títulos :)

Responder
Anabel Cornago

Muchas gracias, Gema. Ya ha puesto una imagen gracias a ti.
Abrazos desde Hamburgo.

Responder
Gem@

yz Ha quedado linda la ramita :D

Responder
ofo1965

como consigo la url del icono si esta en mi ordenador. Propiedades botón derecho? La ruta de destino seria la url?.
Muchas gracias de antemano.

Responder
Gem@

:: ofo1965 mira la siguiente entrada ;)
http://gemablog-.blogspot.com/2009/11/utilizar-blogger-como-servidor-de.html

Responder
ofo1965

Gracias, como me complicaba la vida.

Responder
Gem@

:: Nos ocurre a todos que a veces buscamos la solución más complicada :)

Responder
♥ Ana

Gema ¡¡que alguien me pare!! ;), como siga mirando tu blog no voy a parar de hacer cosas en el mío, jajaja
Esto también lo he hecho, ha sido muy sencillo y me gusta el resultado.
Da gusto pasearse por tu estupendo blog, y, además, da gusto ver lo atenta que eres, gracias
Un besín

Responder
Gem@

:: Ana que me vas a dejar sin existencias jajajaja

Responder
RevistaBluespace

asasa

Responder
Tomás

Hola Gema.
¿Existe la posibilidad de limitar el número de caracteres del título del post? Es decir, una vez sobrepasado un número de letras, que aparezca en el título "...". Tengo ya localizado donde lo quiero aplicar, sólo me falta la parte de CSS.
Saludos!

Responder
Gem@

Por lo que veo ya encontraste la solución.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top